<template>
  <div class="home-pages">
    <!-- 顶部栏 -->
    <cp-nav-bar title="会话">
      <template #right>
        <van-popover
          v-model:show="showPopover"
          theme="dark"
          :actions="actions"
          placement="bottom-end"
          @select="onSelect"
        >
          <template #reference>
            <van-icon name="plus" class="icon-search" size="20" />
          </template>
        </van-popover>
      </template>
    </cp-nav-bar>
    <van-collapse v-model="activeNames">
      <van-collapse-item title="好友" name="1">
        <!-- 消息列表 -->
        <template v-for="item in homeMessageList" :key="item?.sender_id">
          <message-item :item-data="item"></message-item>
        </template>
      </van-collapse-item>
      <van-collapse-item title="群聊" name="2">
        <!-- 群聊列表 -->
        <template v-for="item in homeGroupList" :key="item?.group_id">
          <message-group-item :item-data="item"></message-group-item>
        </template>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import MessageItem from './components/MessageItem.vue'
import MessageGroupItem from './components/MessageGroupItem.vue'
import { getGroupMessageList, getHomeMessage } from '@/services/chat'
import type { homeMessageItem, homeGroup } from '@/types/home'
import { useRouter } from 'vue-router'
const homeMessageList = ref<homeMessageItem[]>([])
const homeGroupList = ref<homeGroup[]>([])
const actions = [{ text: '发起聊天' }, { text: '发起群聊' }, { text: '添加好友' }]
const showPopover = ref(false)
const router = useRouter()
const getHomeMessageList = async () => {
  const res = await getHomeMessage()
  homeMessageList.value = res?.data as homeMessageItem[]
}
getHomeMessageList()
const onSelect = (item: { text: string }) => {
  if (item?.text === '发起聊天') {
    router.push('/startChat')
  } else if (item?.text === '发起群聊') {
    router.push('/addGroup')
  } else {
    router.push('/addFriend')
  }
}
const activeNames = ref(['1', '2'])
const getGroupList = async () => {
  const res = await getGroupMessageList()
  homeGroupList.value = res.data
}
getGroupList()
</script>
<style lang="scss" scoped>
.home-pages {
  padding-top: 46px;
  height: 100vh;
  box-sizing: border-box;
  background-color: var(--bg-primary);
  .icon-search {
    margin-right: 10px;
  }
}
</style>
